        <!DOCTYPE html>
        <html>
        <head>
                <meta charset="utf-8">
        <title>AnalogClock class / analog_clock.dart Library / Dart Documentation</title>
        <link rel="stylesheet" type="text/css"
            href="../styles.css">
        <link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,700,800" rel="stylesheet" type="text/css">
        <link rel="shortcut icon" href="../favicon.ico">
        
        </head>
        <body data-library="analog_clock.dart" data-type="AnalogClock">
        <div class="page">
        <div class="header">
          <a href="../index.html"><div class="logo"></div></a>
          <a href="../index.html">Dart Documentation</a>
         &rsaquo; <a href="../analog_clock.dart.html">analog_clock.dart</a> &rsaquo; <a href="../analog_clock.dart/AnalogClock.html">AnalogClock</a>        <div id="search-box">
          <input type="search" name="q" id="q" autocomplete="off"
              class="search-input" placeholder="Search API">
        </div>
        
      </div>
      <div class="drop-down" id="drop-down"></div>
      
        <div class="nav">
        
<h2><div class="icon-library"></div><a href="../analog_clock.dart.html">analog_clock.dart</a></h2><ul class="icon">
<li><div class="icon-class"></div><strong>AnalogClock</strong></li>
</ul>
<h2><div class="icon-library"></div><a href="../metadata.html">metadata</a></h2></div>
<div class="content">
        <h2><strong>AnalogClock</strong>
          class
        </h2>
        
<button id="show-inherited" class="show-inherited">Hide inherited</button>
<div class="doc">
<p>Contains all the information nessisary to draw an analog clock to a given canvas element.</p>
<pre class="source">
class AnalogClock {
 /// The canvas element to get the drawing context from.
 final CanvasElement canvas;
 /// The rendering context to draw to.
 final CanvasRenderingContext2D context;
 /// The radius of the entire clock face.
 final double clockRadius;
 /// The x position of the center of the clock face.
 final double centerX;
 /// The y position of the center of the clock face.
 final double centerY;
 
 /**
  * Class constructor
  * 
  * Sets all of the class properties, most of which originate from the canvas element.
  * Also rotates the rendering context for correct display of time.
  */
 AnalogClock(CanvasElement canvas)
     : this.canvas = canvas,
       this.context = canvas.getContext("2d"),
       this.clockRadius = min(canvas.width, canvas.height) * 0.49,
       this.centerX = canvas.width / 2,
       this.centerY = canvas.height / 2 {
   // Arc (circle) origins always start at the right side, which makes
   // the math for rendering the clock hard.
   // Make it easier by just rotating the entire canvas -45 degrees.
   context.translate(0, canvas.height);
   context.rotate((3 * PI) / 2);
 }
 
 /**
  * Renders the image to the canvas context.
  * 
  * Processes the details of drawing the clock face and hands.
  */
 void render() {    
   // Set the current date and time
   final DateTime date = new DateTime.now();
   
   // Set the number of degrees between clock markers.
   final double anglePerMinute = 360 / 60;
   
   // Clear the context.
   context.setFillColorRgb(255, 255, 255, 1);
   context.fillRect(0, 0, canvas.width, canvas.height);

   // Start drawing the outline and minute marker path.
   context.beginPath();
   
   // Draw the outline of the clock.
   context.arc(canvas.width / 2, canvas.height / 2, clockRadius, 0, PI * 2, false);
   
   // Draw the minute markers
   for (int i = 0; i &lt; 60; i++) {
     // Determine the length of the minute marker for ease of reading.
     int markLength;
     if (i % 15 == 0) { markLength = 30; }
     else if (i % 5 == 0) { markLength = 20; }
     else { markLength = 10; }
     
     // Determine the angle from 0 to this minute marker;
     double angle = anglePerMinute * i;
     
     // Use cosine to get the ratio of the side adjacent to the hypotenuse.
     double adjRatio = adjacentRatio(angle);
     
     // Use sine to get the ratio of the side opposite of the hypotenuse;
     double oppRatio = oppositeRatio(angle);
     
     // Get the outermost position of the minute marker.
     double outerX = (clockRadius * adjRatio) + centerX;
     double outerY = (clockRadius * oppRatio) + centerY;
     
     // Get the innermost position of the minute marker.
     double innerX = ((clockRadius - markLength) * adjRatio) + centerX;
     double innerY = ((clockRadius - markLength) * oppRatio) + centerY;
     
     // Start the path, move to the inner position, draw to the outer, then close and stroke.
     context.moveTo(innerX, innerY);
     context.lineTo(outerX, outerY);
   }

   // Foundation path is set, stroke it.
   context.setStrokeColorRgb(0, 0, 0, 1);
   context.stroke();
   
   // Draw the clock hands.
   drawClockHand((anglePerMinute * date.minute), 255, 0, 0);
   drawClockHand((anglePerMinute * date.second), 0, 255, 0);
 
   // Prepare to run this function again when the browser is ready.
   window.animationFrame.then((time) =&gt; render()); 
 } // AnalogClock.render()
 
 /**
  * Draws a line from the center of the clock face to the edge.
  * 
  * Angle provided will determine the position of the line.
  */
 void drawClockHand(double angle, int red, int green, int blue) {
   // Get the ratio of the sides to radius.
   double adjRatio = adjacentRatio(angle);
   double oppRatio = oppositeRatio(angle);
   
   // Get the position data for the minute hand.
   double x = (clockRadius * adjRatio) + centerX;
   double y = (clockRadius * oppRatio) + centerY;
   
   // Draw the minute hand in red.
   context.beginPath();
   context.moveTo(centerX, centerY);
   context.lineTo(x, y);
   context.closePath();
   context.setStrokeColorRgb(red, green, blue, 1);
   context.stroke();
 }
 
 /**
  * Returns the ratio of the adjacent side to the hypotenuse.
  */
 double adjacentRatio(double angle) { return cos(angle * (PI / 180)); }
 
 /**
  * Returns the ratio of the opposite side to the hypotenuse.
  */
 double oppositeRatio(double angle) { return sin(angle * (PI / 180)); }
 
}
</pre>
</div>
<div>
<h3>Constructors</h3>
<div class="method"><h4 id="AnalogClock">
<button class="show-code">Code</button>
new <strong>AnalogClock</strong>(<a href="http://api.dartlang.org/dart_html/CanvasElement.html">CanvasElement</a> canvas) <a class="anchor-link" href="#AnalogClock"
              title="Permalink to AnalogClock.AnalogClock">#</a></h4>
<div class="doc">
<p>Class constructor</p>
<p>Sets all of the class properties, most of which originate from the canvas element.
Also rotates the rendering context for correct display of time.</p>
<pre class="source">
AnalogClock(CanvasElement canvas)
   : this.canvas = canvas,
     this.context = canvas.getContext("2d"),
     this.clockRadius = min(canvas.width, canvas.height) * 0.49,
     this.centerX = canvas.width / 2,
     this.centerY = canvas.height / 2 {
 // Arc (circle) origins always start at the right side, which makes
 // the math for rendering the clock hard.
 // Make it easier by just rotating the entire canvas -45 degrees.
 context.translate(0, canvas.height);
 context.rotate((3 * PI) / 2);
}
</pre>
</div>
</div>
</div>
<div>
<h3>Properties</h3>
<div class="field"><h4 id="canvas">
<button class="show-code">Code</button>
final <a href="http://api.dartlang.org/dart_html/CanvasElement.html">CanvasElement</a>         <strong>canvas</strong> <a class="anchor-link"
            href="#canvas"
            title="Permalink to AnalogClock.canvas">#</a>
        </h4>
        <div class="doc">
<p>The canvas element to get the drawing context from.</p>
<pre class="source">
final CanvasElement canvas
</pre>
</div>
</div>
<div class="field"><h4 id="centerX">
<button class="show-code">Code</button>
final <a href="http://api.dartlang.org/dart_core/double.html">double</a>         <strong>centerX</strong> <a class="anchor-link"
            href="#centerX"
            title="Permalink to AnalogClock.centerX">#</a>
        </h4>
        <div class="doc">
<p>The x position of the center of the clock face.</p>
<pre class="source">
final double centerX
</pre>
</div>
</div>
<div class="field"><h4 id="centerY">
<button class="show-code">Code</button>
final <a href="http://api.dartlang.org/dart_core/double.html">double</a>         <strong>centerY</strong> <a class="anchor-link"
            href="#centerY"
            title="Permalink to AnalogClock.centerY">#</a>
        </h4>
        <div class="doc">
<p>The y position of the center of the clock face.</p>
<pre class="source">
final double centerY
</pre>
</div>
</div>
<div class="field"><h4 id="clockRadius">
<button class="show-code">Code</button>
final <a href="http://api.dartlang.org/dart_core/double.html">double</a>         <strong>clockRadius</strong> <a class="anchor-link"
            href="#clockRadius"
            title="Permalink to AnalogClock.clockRadius">#</a>
        </h4>
        <div class="doc">
<p>The radius of the entire clock face.</p>
<pre class="source">
final double clockRadius
</pre>
</div>
</div>
<div class="field"><h4 id="context">
<button class="show-code">Code</button>
final <a href="http://api.dartlang.org/dart_html/CanvasRenderingContext2D.html">CanvasRenderingContext2D</a>         <strong>context</strong> <a class="anchor-link"
            href="#context"
            title="Permalink to AnalogClock.context">#</a>
        </h4>
        <div class="doc">
<p>The rendering context to draw to.</p>
<pre class="source">
final CanvasRenderingContext2D context
</pre>
</div>
</div>
</div>
<div>
<h3>Methods</h3>
<div class="method"><h4 id="adjacentRatio">
<button class="show-code">Code</button>
<a href="http://api.dartlang.org/dart_core/double.html">double</a> <strong>adjacentRatio</strong>(<a href="http://api.dartlang.org/dart_core/double.html">double</a> angle) <a class="anchor-link" href="#adjacentRatio"
              title="Permalink to AnalogClock.adjacentRatio">#</a></h4>
<div class="doc">
<p>Returns the ratio of the adjacent side to the hypotenuse.</p>
<pre class="source">
double adjacentRatio(double angle) { return cos(angle * (PI / 180)); }
</pre>
</div>
</div>
<div class="method"><h4 id="drawClockHand">
<button class="show-code">Code</button>
void <strong>drawClockHand</strong>(<a href="http://api.dartlang.org/dart_core/double.html">double</a> angle, <a href="http://api.dartlang.org/dart_core/int.html">int</a> red, <a href="http://api.dartlang.org/dart_core/int.html">int</a> green, <a href="http://api.dartlang.org/dart_core/int.html">int</a> blue) <a class="anchor-link" href="#drawClockHand"
              title="Permalink to AnalogClock.drawClockHand">#</a></h4>
<div class="doc">
<p>Draws a line from the center of the clock face to the edge.</p>
<p>Angle provided will determine the position of the line.</p>
<pre class="source">
void drawClockHand(double angle, int red, int green, int blue) {
 // Get the ratio of the sides to radius.
 double adjRatio = adjacentRatio(angle);
 double oppRatio = oppositeRatio(angle);
 
 // Get the position data for the minute hand.
 double x = (clockRadius * adjRatio) + centerX;
 double y = (clockRadius * oppRatio) + centerY;
 
 // Draw the minute hand in red.
 context.beginPath();
 context.moveTo(centerX, centerY);
 context.lineTo(x, y);
 context.closePath();
 context.setStrokeColorRgb(red, green, blue, 1);
 context.stroke();
}
</pre>
</div>
</div>
<div class="method"><h4 id="oppositeRatio">
<button class="show-code">Code</button>
<a href="http://api.dartlang.org/dart_core/double.html">double</a> <strong>oppositeRatio</strong>(<a href="http://api.dartlang.org/dart_core/double.html">double</a> angle) <a class="anchor-link" href="#oppositeRatio"
              title="Permalink to AnalogClock.oppositeRatio">#</a></h4>
<div class="doc">
<p>Returns the ratio of the opposite side to the hypotenuse.</p>
<pre class="source">
double oppositeRatio(double angle) { return sin(angle * (PI / 180)); }
</pre>
</div>
</div>
<div class="method"><h4 id="render">
<button class="show-code">Code</button>
void <strong>render</strong>() <a class="anchor-link" href="#render"
              title="Permalink to AnalogClock.render">#</a></h4>
<div class="doc">
<p>Renders the image to the canvas context.</p>
<p>Processes the details of drawing the clock face and hands.</p>
<pre class="source">
void render() {    
 // Set the current date and time
 final DateTime date = new DateTime.now();
 
 // Set the number of degrees between clock markers.
 final double anglePerMinute = 360 / 60;
 
 // Clear the context.
 context.setFillColorRgb(255, 255, 255, 1);
 context.fillRect(0, 0, canvas.width, canvas.height);

 // Start drawing the outline and minute marker path.
 context.beginPath();
 
 // Draw the outline of the clock.
 context.arc(canvas.width / 2, canvas.height / 2, clockRadius, 0, PI * 2, false);
 
 // Draw the minute markers
 for (int i = 0; i &lt; 60; i++) {
   // Determine the length of the minute marker for ease of reading.
   int markLength;
   if (i % 15 == 0) { markLength = 30; }
   else if (i % 5 == 0) { markLength = 20; }
   else { markLength = 10; }
   
   // Determine the angle from 0 to this minute marker;
   double angle = anglePerMinute * i;
   
   // Use cosine to get the ratio of the side adjacent to the hypotenuse.
   double adjRatio = adjacentRatio(angle);
   
   // Use sine to get the ratio of the side opposite of the hypotenuse;
   double oppRatio = oppositeRatio(angle);
   
   // Get the outermost position of the minute marker.
   double outerX = (clockRadius * adjRatio) + centerX;
   double outerY = (clockRadius * oppRatio) + centerY;
   
   // Get the innermost position of the minute marker.
   double innerX = ((clockRadius - markLength) * adjRatio) + centerX;
   double innerY = ((clockRadius - markLength) * oppRatio) + centerY;
   
   // Start the path, move to the inner position, draw to the outer, then close and stroke.
   context.moveTo(innerX, innerY);
   context.lineTo(outerX, outerY);
 }

 // Foundation path is set, stroke it.
 context.setStrokeColorRgb(0, 0, 0, 1);
 context.stroke();
 
 // Draw the clock hands.
 drawClockHand((anglePerMinute * date.minute), 255, 0, 0);
 drawClockHand((anglePerMinute * date.second), 0, 255, 0);

 // Prepare to run this function again when the browser is ready.
 window.animationFrame.then((time) =&gt; render()); 
}
</pre>
</div>
</div>
</div>
        </div>
        <div class="clear"></div>
        </div>
        <div class="footer">
          <div>This page was generated at 2013-05-19 02:28:54.136</div>
        </div>
        <script async src="../client-static.js"></script>
        </body></html>
        
